<template>
	<view class="container">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="containerCode" style="display: flex;">
				<span style="margin-right: 20rpx;">容器码</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model.trim="query.containerCode" 
					@confirm="getCheckDetail"
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<uni-table v-if="materialList.length > 0" ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0">
			<uni-tr>
				<uni-th width="30">物料料号</uni-th>
				<uni-th width="30">物料批次号</uni-th>
				<uni-th width="20" v-if="checkType === '1'">库存数量</uni-th>
				<uni-th width="30">数量</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in materialList" :key="index" class="td-container">
				<uni-td>
					<view @click="checkMaterialDetail(item.materialCode)">
						{{ item.materialCode.slice(0, 9) }}</br>{{ item.materialCode.slice(9, 18) }}
					</view>
				</uni-td>
				<uni-td>
					<view>
						{{ item.materialBatch }}
					</view>
				</uni-td>
				<uni-td v-if="checkType === '1'">{{ item.materialQty }}</uni-td>
				<uni-td class="last-td">
					<view style="display: flex;gap: 10rpx;">
						<u-input
							v-model="item.checkingQty" 
							type="number" 
							placeholder="请输入"
							style="width: auto;"
						>
						</u-input>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 模态框 -->
		<u-modal
			:show="show"
			:title="title"
			@confirm="cancelModal"
		>
			<view style="display: flex;flex-direction: column;">
				<view style="display: flex;">
					<view style="flex: 2;">物料编号：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialCode }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">物料名称：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialName }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">物料批次号：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialBatch }}</view>
				</view>
				<view style="display: flex;" v-if="checkType === '1'">
					<view style="flex: 2;">库存数量：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialQty }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">单位：</view>
					<view style="flex: 3;">{{ selectedMaterial.unit }}</view>
				</view>
			</view>
		</u-modal>
		<u-button style="margin-top: 20rpx;" type="primary" text="确认盘点" @click="submit"></u-button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { checkDetail, submitCheck } from '@/api/work/check.js'
	// import uniCard from '@/node_modules/@dcloudio/uni-ui/lib/uni-card/uni-card.vue'; 
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					checkOrder: '',
					containerCode: ''
				},
				checkType: '',
				materialList: [],
				show: false,
				title: '物料详情',
				selectedMaterial: {}
			};
		},
		onLoad(options) {
			this.query.checkOrder = options.checkOrder
			this.checkType = options.checkType
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},
		onUnload() {  
			 // 移除监听事件      
			 uni.$off('scancodedate')
		},
		methods: {
			async getCheckDetail() {
				const res = await checkDetail(this.query)
				if(res.meta.code === 200) {
					this.materialList = res.data.list
				} else if (res.meta.code === 300) {
					this.materialList = []
					this.query.containerCode = ''
					this.$refs.uToast.show({
						type: 'warning',
						message: '该容器已盘点完毕'
					})
				}
			},
			// 执行盘点
			async submit() {
				if (!this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描容器'
					})
				}
				let isValid = this.materialList.every(item => {
				  return item.checkingQty !== '' && item.checkingQty !== null && item.checkingQty !== undefined && Number(item.checkingQty) > 0;
				})
				if(!isValid) {	
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请输入完整的盘点数量'
					})
				} else {
					const res = await submitCheck({
						checkOrder: this.query.checkOrder,
						containerCode: this.query.containerCode,
						inventoryList: this.materialList
					})
					if(res.meta.code === 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: '提交成功'
						})
						this.query.containerCode = ''
						this.materialList = []
					}
				}
			},
			getCode(code) {
				const pattern = /^[A-Za-z]\d{9}$/
				if (pattern.test(code)) {
					this.query.containerCode = code
					this.getCheckDetail()
				}
			},
			cancelModal() {
				this.show = false
			},
			checkMaterialDetail(val) {
				const foundMaterial = this.materialList.find(item => item.materialCode === val)
				if (foundMaterial) {
					this.selectedMaterial = foundMaterial
					this.show = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/deep/ .uni-card {
	margin: 0 !important;
	padding: 10rpx !important;
}

.td-container {
	.last-td {
		width: 120rpx;
	}
}
</style>
